<script>
import MyCom1 from '@/components/08_动态组件_component1.vue'
import MyCom2 from '@/components/08_动态组件_component2.vue'
import MyCom3 from '@/components/08_动态组件_component3.vue'
import {defineAsyncComponent} from "vue";


export default {
  data(){
    return{
      nowCom:'my-com1'
    }
  },
  methods:{

  },
  //defineAsyncComponent异步加载组件，点击后才加载的组件
  //增加suspense异步加载组件 async loading...
  components:{
    'my-com1': defineAsyncComponent(()=>import('@/components/08_动态组件_component1.vue')),
    'my-com2':defineAsyncComponent(()=>import('@/components/08_动态组件_component2.vue')),
    'my-com3':defineAsyncComponent(()=>import('@/components/08_动态组件_component3.vue')),
  },
}

</script>

<template>
  <div>08_动态组件.vue
    <button @click="nowCom = 'my-com1'">动态组件1</button>
    <button @click="nowCom = 'my-com2'">动态组件2</button>
    <button @click="nowCom = 'my-com3'">动态组件3</button>

    <transition name="slide" mode="out-in">
      <keep-alive>
        <suspense>
          <component :is="nowCom"></component>
          <template #fallback>
            <div>loading....</div>
          </template>
        </suspense>
      </keep-alive>
    </transition>
  </div>
</template>

<style scoped>
.slide-enter-from{
  opacity: 0;
  transform: translateX(200px);
}

.slide-enter-to{
  opacity: 1;
  transform: translateX(0);
}

.slide-enter-active{
  transition: 1s;
}

.slide-leave-from{
  opacity: 1;
  transform: translateX(0);

}

.slide-leave-to{
  opacity: 0;
  transform: translateX(200px);

}

.slide-leave-active{
  transition: 1s;
}
</style>